<template>
	<view class="">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="card-area">
						<view class="card-3">
							<view class="">
							<text class="tj">设备号:{{ a2 }}{{ a3 }}</text>
							    <view class="">
								  <image class="data-logo" src="/static/塔机.png"></image>
							    </view>
							</view>
							
							<view class="">
								<view class="dot" v-if="fnOnlineStatusText(a4).status==1"></view>
								<view class="dot-red" v-if="fnOnlineStatusText(a4).status==0"></view>
							</view>
							<view class="">
								<text class="zx">{{fnOnlineStatusText(a4).text}}</text><!-- 状态指示灯 -->
							</view>
						</view>
					</view>
					<view class="card-4">
						<view class="cont_item_F">
							<view class="item_F">
								<view class="item_F_text">吊绳倍率</view>
								<view class="item_F_num">{{a4}}</view>
							</view>
							<view class="item_F">
								<view class="item_F_text">X坐标</view>
								<view class="item_F_num">{{a5}}</view>
							</view>
							<view class="item_F">
								<view class="item_F_text">Y坐标</view>
								<view class="item_F_num">{{a6}}</view>
							</view>
							<view class="item_F">
								<view class="item_F_text">前臂长</view>
								<view class="item_F_num">{{a7}}</view>
							</view>
							<view class="item_F">
								<view class="item_F_text">后臂长</view>
								<view class="item_F_num">{{a8}}</view>
							</view>
						  </view>
						  
						  <view class="cont_item_F">
						  	<view class="item_F">
						  		<view class="item_F_text">塔帽高度</view>
						  		<view class="item_F_num">{{a9}}</view>
						  	</view>
						  	<view class="item_F">
						  		<view class="item_F_text">塔身高度</view>
						  		<view class="item_F_num">{{a10}}</view>
						  	</view>
						  	<view class="item_F">
						  		<view class="item_F_text">经度</view>
						  		<view class="item_F_num">{{a11}}</view>
						  	</view>
						  	<view class="item_F">
						  		<view class="item_F_text">纬度</view>
						  		<view class="item_F_num">{{a12}}</view>
						  	</view>
						  	<view class="item_F">
						  		<view class="item_F_text">左最大角</view>
						  		<view class="item_F_num">{{a13}}</view>
						  	</view>
						    </view>
							<view class="cont_item_F">
								<view class="item_F">
									<view class="item_F_text">右最大角</view>
									<view class="item_F_num">{{a14}}</view>
								</view>
								<view class="item_F">
									<view class="item_F_text">最远距离</view>
									<view class="item_F_num">{{a15}}</view>
								</view>
								<view class="item_F">
									<view class="item_F_text">最近距离</view>
									<view class="item_F_num">{{a16}}</view>
								</view>
								<view class="item_F">
									<view class="item_F_text">最高距离</view>
									<view class="item_F_num">{{a17}}</view>
								</view>
								<view class="item_F">
									<view class="item_F_text">最大载重</view>
									<view class="item_F_num">{{a18}}</view>
								</view>
							  </view>
							  <view class="cont_item_F">
							  	<view class="item_F">
							  		<view class="item_F_text">最大力矩</view>
							  		<view class="item_F_num">{{a19}}</view>
							  	</view>
							  	<view class="item_F">
							  		<view class="item_F_text">预警</view>
							  		<view class="item_F_num">{{a20}}</view>
							  	</view>
							  	<view class="item_F">
							  		<view class="item_F_text">报警</view>
							  		<view class="item_F_num">{{a21}}</view>
							  	</view>
							  	<view class="item_F">
							  		<view class="item_F_text">违章</view>
							  		<view class="item_F_num">{{a22}}</view>
							  	</view>
							    </view>
					</view>
				</swiper-item>
				<swiper-item>
					<text class="lb">实时数据</text>
						<view class="card-1">
							<view class="cont_item_two">
								<view class="item_two">
									<view class="item_two_text">高度</view>
									<view class="item_two_num">{{b2}}</view>
								</view>
								<view class="item_two">
									<view class="item_two_text">幅度</view>
									<view class="item_two_num">{{b3}}</view>
								</view>
								<view class="item_two">
									<view class="item_two_text">转角</view>
									<view class="item_two_num">{{b4}}</view>
								</view>
								<view class="item_two">
									<view class="item_two_text">载重</view>
									<view class="item_two_num">{{b5}}</view>
								</view>
							  </view>
							  <view class="cont_item_two">
							  	<view class="item_two">
							  		<view class="item_two_text">安全载重</view>
							  		<view class="item_two_num">{{b6}}</view>
							  	</view>
							  	<view class="item_two">
							  		<view class="item_two_text">安全载重比</view>
							  		<view class="item_two_num">{{b7}}</view>
							  	</view>
							  	<view class="item_two">
							  		<view class="item_two_text">力矩</view>
							  		<view class="item_two_num">{{b8}}</view>
							  	</view>
							  	<view class="item_two">
							  		<view class="item_two_text">力矩载重比</view>
							  		<view class="item_two_num">{{b9}}</view>
							  	</view>
							    </view>
								<view class="cont_item_two">
									<view class="item_two">
										<view class="item_two_text">当前风速</view>
										<view class="item_two_num">{{b10}}</view>
									</view>
									<view class="item_two">
										<view class="item_two_text">倾斜角度X</view>
										<view class="item_two_num">{{b11}}</view>
									</view>
									<view class="item_two">
										<view class="item_two_text">力矩</view>
										<view class="item_two_num">{{b12}}</view>
									</view>
									<view class="item_two">
										<view class="item_two_text">倾斜角度Y</view>
										<view class="item_two_num">{{b13}}</view>
									</view>
								  </view>
								  <view class="cont_item_two">
								  	<view class="item_two">
								  		<view class="item_two_text">设备状态</view>
								  		<view class="item_two_num">{{b14}}</view>
								  	</view>
								  	<view class="item_two">
								  		<view class="item_two_text">下降深度</view>
								  		<view class="item_two_num">{{b15}}</view>
								  	</view>
								    </view>
						</view>
					<view class="time">
								<text class="sssj">上次更新时间：{{b1}}</text>
					</view>
				</swiper-item>
				
				<swiper-item>
					<view class="lb">吊装历史信息</view>
					    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
					@scroll="scroll">
					<view class="card-2" v-for="(item, index) in historyList":key="index">
					<!-- <view class="card-2"> -->
					<view class="cont_time">数据时间:{{ fnGetHistoryList(index).c1 }}</view>
					<view class="cont_item">
						<view class="item_one">
							<view class="item_text">最大载重</view>
							<view class="item_num">{{ fnGetHistoryList(index).c4 }}</view>
						</view>
						<view class="item_one">
							<view class="item_text">最大力矩</view>
							<view class="item_num">{{ fnGetHistoryList(index).c6 }}</view>
						</view>
						<view class="item_one">
							<view class="item_text">开始转角</view>
							<view class="item_num">{{ fnGetHistoryList(index).c8 }}</view>
						</view>
						<view class="item_one">
							<view class="item_text">结束转角</view>
							<view class="item_num">{{ fnGetHistoryList(index).c9 }}</view>
						</view>
						<view class="item_one">
							<view class="item_text">开始幅度</view>
							<view class="item_num">{{ fnGetHistoryList(index).c10 }}</view>
						</view>
					  </view>
					  
					  <view class="cont_item">
					  	<view class="item_one">
					  		<view class="item_text">结束幅度</view>
					  		<view class="item_num">{{ fnGetHistoryList(index).c11 }}</view>
					  	</view>
					  	<view class="item_one">
					  		<view class="item_text">最大幅度</view>
					  		<view class="item_num">{{ fnGetHistoryList(index).c12 }}</view>
					  	</view>
					  	<view class="item_one">
					  		<view class="item_text">最小幅度</view>
					  		<view class="item_num">{{ fnGetHistoryList(index).c13 }}</view>
					  	</view>
					  	<view class="item_one">
					  		<view class="item_text">开始高度</view>
					  		<view class="item_num">{{ fnGetHistoryList(index).c14 }}</view>
					  	</view>
					  	<view class="item_one">
					  		<view class="item_text">结束高度</view>
					  		<view class="item_num">{{ fnGetHistoryList(index).c15 }}</view>
					  	</view>
					    </view>
						
						<view class="cont_item">
							<view class="item_one">
								<view class="item_text">最大高度</view>
								<view class="item_num">{{ fnGetHistoryList(index).c16 }}</view>
							</view>
							<view class="item_one">
								<view class="item_text">最小高度</view>
								<view class="item_num">{{ fnGetHistoryList(index).c17 }}</view>
							</view>
							<view class="item_one">
								<view class="item_text">最大风速</view>
								<view class="item_num">{{ fnGetHistoryList(index).c18 }}</view>
							</view>
							<view class="item_one">
								<view class="item_text">最大倾角X</view>
								<view class="item_num">{{ fnGetHistoryList(index).c19 }}</view>
							</view>
							<view class="item_one">
								<view class="item_text">最大倾角Y</view>
								<view class="item_num">{{ fnGetHistoryList(index).c20 }}</view>
							</view>
						  </view>
						  <view class="cont_item">
							  
						  <view class="OPENtime">
						  <text class="item_text">吊装开始时间:{{ fnGetHistoryList(index).c2 }}</text>
						  </view>
						  <view class="ENDtime">
						  <text class="item_text">吊装结束时间:{{ fnGetHistoryList(index).c3 }}</text>
						  </view>
<!-- 						  <text class="sssj">上次更新时间：{{b0}}</text> -->
						  </view>
					</view>
					
					
						</scroll-view>
					
				</swiper-item>
				<swiper-item>
					<view class="lb">驾驶员信息</view>
						<uni-list>
							<uni-list-item title="姓名" rightText="— —" />
							<uni-list-item title="身份证信息" rightText="— —" />
							<uni-list-item title="状态" rightText="— —" />
							<uni-list-item title="操作时间" rightText="— —" />
						</uni-list>
				</swiper-item>
			</swiper>
<!-- 			<button @click="sendMessage(Text1)">WebSocket测试1</button>
			<button @click="sendMessage(Text2)">WebSocket测试2</button>
			<button @click="sendMessage(Text3)">WebSocket测试3</button> -->
<!-- 			<view class="">{{receivedData}}</view>
			<view class="lb">{{historyList}}</view> -->
<!-- 			<view v-for="(item, index) in historyList" :key="index">{{ item }}</view> -->
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				history: {
					page: 0,
					size: 8
				},
				now: Date.now(),
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				scrollTop: 0,
				receivedData:'',
				heartbeatTime:'',
				Count:'',
				old: {
					scrollTop: 0
				},
				Bcount:'',
				Acount:'',
				ID: 0,
				historyList:[{"a4":1,"a2":4,"b2":7,"b3":10,"c4":13,"c6":16,"c1":20},{"a4":2,"a2":5,"b2":8,"b3":11,"c4":14,"c6":17},{"a4":3,"a2":6,"b2":9,"b3":12,"c4":15,"c6":18}],
				historyCount:'',
				Text1:'{"a1":0,"a4":1,"a2":4,"b2":7,"b3":10,"c4":13,"c6":16}',
				Text2:'{"a1":1,"a4":2,"a2":5,"b2":8,"b3":11,"c4":14,"c6":17}',
				Text3:'{"a1":1,"a4":3,"a2":6,"b2":9,"b3":12,"c4":15,"c6":18}',
				a1:'',
				a2:'',
				a3:'',
				a4:'',
				a5:'',
				a6:'',
				a7:'',
				a8:'',
				a9:'',
				a10:'',
				a11:'',
				a12:'',
				a13:'',
				a14:'',
				a15:'',
				a16:'',
				a17:'',
				a18:'',
				a19:'',
				a20:'',
				a21:'',
				a22:'',
				b0:'',
				b1:'',
				b2:'',
				b3:'',
				b4:'',
				b5:'',
				b6:'',
				b7:'',
				b8:'',
				b9:'',
				b10:'',
				b11:'',
				b12:'',
				b13:'',
				b14:'',
				b15:'',
				c00:'',
				c01:'',
				c02:'',
				c1:'',
				c2:'',
				c3:'',
				c4:'',
				c5:'',
				c6:'',
				c7:'',
				c8:'',
				c9:'',
				c10:'',
				c11:'',
				c12:'',
				c13:'',
				c14:'',
				c15:'',
				c16:'',
				c17:'',
				c18:'',
				c19:'',
				c20:'',
				c21:'',
				c22:'',
				
				

				
				
			}
		},
		onLoad() {
			
			uni.connectSocket({
				  url: 'ws://124.222.224.186:8800'
				  // url: 'ws://',
				});
				
			uni.onSocketOpen(function (res) {
				  console.log('WebSocket连接已打开！');
				});
			
			uni.onSocketMessage((res) => {
				  console.log('收到服务器内容：' + res.data);
				  // this.receivedData = res.data
				  const start = res.data.indexOf('{'); // 找到 JSON 字符串的起始位置
				  const end = res.data.lastIndexOf('}') + 1; // 找到 JSON 字符串的结束位置
				  const jsonString = res.data.substring(start, end); // 提取 JSON 字符串
				  this.receivedData = JSON.parse(jsonString)
				  // this.Count = this.receivedData;
				  this.Acount = this.receivedData.Acount;
				  this.Bcount = this.receivedData.Bcount;
				  this.ID = this.receivedData.ID;
				  this.heartbeatTime = this.receivedData.heartbeatTime;
				  if (this.receivedData.c4 > 0) {
				  this.historyList.push(this.receivedData);
				  }
				  // this.historyList.push(this.receivedData);
				  this.a1 = this.receivedData.a1;
				  this.a2 = this.receivedData.a2;
				  this.a3 = this.receivedData.a3;
				  this.a4 = this.receivedData.a4;
				  this.a5 = this.receivedData.a5;
				  this.a6 = this.receivedData.a6;
				  this.a7 = this.receivedData.a7;
				  this.a8 = this.receivedData.a8;
				  this.a9 = this.receivedData.a9;
				  this.a10 = this.receivedData.a10;
				  this.a11 = this.receivedData.a11;
				  this.a12 = this.receivedData.a12;
				  this.a13 = this.receivedData.a13;
				  this.a14 = this.receivedData.a14;
				  this.a15 = this.receivedData.a15;
				  this.a16 = this.receivedData.a16;
				  this.a17 = this.receivedData.a17;
				  this.a18 = this.receivedData.a18;
				  this.a19 = this.receivedData.a19;
				  this.a20 = this.receivedData.a20;
				  this.a21 = this.receivedData.a21;
				  this.a22 = this.receivedData.a22;
				  this.b0 = this.receivedData.b0;
				  this.b1 = this.receivedData.b1;
				  this.b2 = this.receivedData.b2;
				  this.b3 = this.receivedData.b3;
				  this.b4 = this.receivedData.b4;
				  this.b5 = this.receivedData.b5;
				  this.b6 = this.receivedData.b6;
				  this.b7 = this.receivedData.b7;
				  this.b8 = this.receivedData.b8;
				  this.b9 = this.receivedData.b9;
				  this.b10 = this.receivedData.b10;
				  this.b11 = this.receivedData.b11;
				  this.b12 = this.receivedData.b12;
				  this.b13 = this.receivedData.b13;
				  this.b14 = this.receivedData.b14;
				  this.b15 = this.receivedData.b15;
				  
				  
				  });
			
			


		},
		onPullDownRefresh() {
			this.initData();
			
		},
		
			
		methods: {
			initData(){
				setTimeout(() => {
					uni.reLaunch({
					        url: '/pages/index/N1'
					      });
						
					// uni.navigateTo({
					// 	    url: '/pages/index/N1'
					// 	  });
					uni.stopPullDownRefresh();
				}, 750);
			},
			
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			fnGetHistoryList(pa) {
				// let data = JSON.parse(res)
				// this.history.page += 1;
				// let page =this.history.page;
				let data,Acount,Bcount,c00,c01,c02,c1,c2,c3,c4,c5,c6,c7,c8,c9,c10,c11,c12,c13,c14,c15,c16,c17,c18,c19,c20,c21,c22;
				// let _data = data.list;
				// if (_data.length < this.history.size) {
				// this.historyList = this.historyList.concat(_data);
				data = this.historyList[pa];
				Acount=data.Acount;
				Bcount=data.Bcount;
				c1=data.c1;
				c2=data.c2;
				c3=data.c3;
				c4=data.c4;
				c5=data.c5;
				c6=data.c6;
				c7=data.c7;
				c8=data.c8;
				c9=data.c9;
				c10=data.c10;
				c11=data.c11;
				c12=data.c12;
				c13=data.c13;
				c14=data.c14;
				c15=data.c15;
				c16=data.c16;
				c17=data.c17;
				c18=data.c18;
				c19=data.c19;
				c20=data.c20;
				c21=data.c21;
				c22=data.c22;
				c00=data.c00;
				c01=data.c01;
				c02=data.c02;
				return { Acount: Acount, Bcount: Bcount ,c00:c00, c01:c01, c02:c02, c1:c1, c2:c2, c3:c3, c4:c4, c5:c5, c6:c6, c7:c7, c8:c8, c9:c9, c10:c10, c11:c11, c12:c12, c13:c13, c14:c14, c15:c15, c16:c16, c17:c17, c18:c18, c19:c19, c20:c20, c21:c21, c22:c22};
				// }
			},
			sendMessage: function(te){
			  	uni.sendSocketMessage({
			  	  data: te
			  	});
			},
			
			fnOnlineStatusText: function(heartbeatTime) {
			    // 检查心跳时间以确定用户状态
			    let status, text;
			    
			    // 假设如果心跳时间小于某个阈值，我们认为用户是在线的
			    const HEARTBEAT_THRESHOLD = 5 * 60 * 1000; // 5分钟
			
			    if (heartbeatTime > 0 && heartbeatTime < HEARTBEAT_THRESHOLD) {
			      // 用户在线
			      status = 1;
			      text = '在线';
			    } else {
			      // 用户离线
			      status = 0;
			      text = '离线';
			    }
			
			    // 返回一个包含状态码和状态文本的对象
			    return { status: status, text: text };
			  },
			
			},
			
			
			


	}
</script>

<style>
	

	.data-logo {
		height: 175rpx;
		width: 175rpx;
		margin-top: 10rpx;
		margin-left: 35rpx;
		margin-right: auto;
		margin-bottom: auto;
	}


	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.card-1 {
		height: 550rpx;
		width: 700rpx;
		border-radius: 30rpx;
		margin: 50rpx auto 0;
/* 		margin-top: 10rpx; */
/* 		display: flex; */
/* 		justify-content: space-around;
		align-items: center; */
		box-shadow: 0 0 24rpx #ccc;
	}
	.card-2 {
		width: 688rpx;
		height: 550rpx;
		border-radius: 30rpx;
		margin: 50rpx auto 0;
		box-shadow: 0 0 24rpx #ccc;
	}
	.card-4 {
		width: 600rpx;
		height: 380rpx;
		border-radius: 30rpx;
		margin: 50rpx auto 0;
		box-shadow: 0 0 24rpx #ccc;
	}
	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		/* background-color: #ebebeb; */
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
	.dev-title {
		font-size: 15rpx;
		text-align: center;
		color: #6d6d6d;
	}
	.dev-date {
		font-size: 15rpx;
		text-align: center;
		color: #000000;
	}
	.padding {
	/* 	padding: 15rpx; */	
	    margin-top: auto;
		margin-left: 10rpx;
		margin-right: auto;
		margin-bottom: 20rpx;
	
	}
	.title-data{
		font-size: 27rpx;
		text-align: center;
		color: #000000;
	}
	.time{
		font-size: 25rpx;
		text-align: center;
/* 		margin-right: 25rpx; */
		color: #000000;
	}
	.OPENtime{
		font-size: 25rpx;
		text-align: left;
		margin-right: 25rpx;
		color: #000000;
	}
	.ENDtime{
		font-size: 25rpx;
		text-align: right;
		margin-right: 25rpx;
		color: #000000;
	}
	.sssj{
		font-size: 40rpx;
		color: #000000;
	}
	.swiper {
		height: 750rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.cont_time {
		width: 620rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: right;
		color: #6e6e6e;
		font-size: 24rpx;
	}
	
	.cont_item {
		width: 620rpx;
		height: 150rpx;
		display: flex;
	}
	.item_one {
	    width: 135rpx;
		height: 150rpx;
	}
	.item_num {
		width: 135rpx;
		height: 100rpx;
		line-height: 50rpx;
		font-size: 35rpx;
		color: #373737;
		text-align: center;
	}
	
	.item_text {
		width: 135rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #6d6d6d;
		font-size: 24rpx;
	}
	.cont_item_two {
		width: 620rpx;
		height: 150rpx;
		display: flex;
	}
	.item_two {
	    width: 180rpx;
		height: 150rpx;
	}
	.item_two_num {
		width: 180rpx;
		height: 100rpx;
		line-height: 50rpx;
		font-size: 35rpx;
		color: #373737;
		text-align: center;
	}
	.item_two_text {
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #6d6d6d;
		font-size: 24rpx;
	}
	.cont_item_F {
		width: 600rpx;
		height: 90rpx;
		display: flex;
	}
	.item_F {
	    width: 120rpx;
		height: 150rpx;
	}
	.item_F_num {
		width: 120rpx;
		height: 100rpx;
		line-height: 50rpx;
		font-size: 20rpx;
		color: #373737;
		text-align: center;
	}
	.item_F_text {
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #6d6d6d;
		font-size: 14rpx;
	}
	.scroll-Y {
		height: 600rpx;
	}
	.lb{
		font-size: 45rpx;
		margin-left: 35rpx;
		color: #000000;
	}
	.card-area {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 20rpx;
	}
	.tj{
		font-size: 30rpx;
		margin-left: 10rpx;
	}
	.zx{
		font-size: 40rpx;
		margin-left: 18rpx;
		color: #000000;
	}
	.dot {
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
			margin-left: 150rpx;
	/* 		margin-right: 10rpx; */
			background-color: #14D2B8;
		}
	.dot-red {
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				margin-left: 150rpx;
		/* 		margin-right: 10rpx; */
				background-color: #FA3534;
		}
	.card-3 {
		height: 250rpx;
		width: 600rpx;
		border-radius: 30rpx;
		margin-top: 5rpx;
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	
	
</style>
